<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="fr">
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="selectArr.includes(tag.id)"
              :color="selectArr.includes(tag.id) ? tag.color : ''"
              size="medium"
              :class="{ active: selectArr.includes(tag.id) }"
              :data-id="tag.id"
              @click="handleFilter"
              @close="handleClose(tag.id)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card-container">
      <!-- <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>跌倒报警</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto;">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col> 
      </el-row> -->
      <el-tabs
      v-model="activename"
      type="border-card"
      @tab-click="handleSelectBuilding"
    >
      <el-tab-pane
        v-for="(item, index) in buildingData"
        :key="index"
        :datafloorid="item.id"
        :name="item.name"
        :label="item.name"
      >
        <el-tabs
          v-model="flooractivename"
          type="card"
          tab-position="left"
          @tab-click="handleTabFloorClick"
        >
          <el-tab-pane
            v-for="(ite, idx) in floorData"
            :key="idx"
            :label="ite.name"
            :datafloorid="ite.id"
            :name="ite.name"
            style="min-height: 400px"
          >
            <el-row :gutter="30">
            <template v-for="floor in pageDataList">
              <el-col :key="floor.id" :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
                <el-card shadow="hover" :class="backgroundColor[getBackground(floor)]">
                  <div style="width: 100%; height: auto;">
                    <div class="item">
                      <span>{{floor.room_code}}</span>
                      <vab-icon
                        class="header_icon"
                        :icon="['fas', icon[getBackground(floor)]]"
                      ></vab-icon>
                      <span>{{tags[getBackground(floor)] && tags[getBackground(floor)].name}}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </template>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    </div>
  </div>
</template>
<script>
  import { getOlder } from "@/api/oldermanager";
  import { getList } from "@/api/bedList";
  import { getBuilding, getFloor } from "@/api/building";
  import mixins from '@/utils/mixins.js';
  export default {
    name: "Index",
    components: {},
    mixins: [mixins],
    data() {
      return {
        selectArr: [0, 1, 2, 3],
        icon: ["male", "pray", "bell", "male"],
        backgroundColor: [
          "colorType0",
          "colorType1",
          "colorType3",
        ],
        tags: [
          { name: "有人进入", color: "#E0C720", id: 0 },
          { name: "呼叫报警", color: "#E5362A", id: 1 },
          { name: "无人状态", color: "#18BA39", id: 3 },
        ],
        formData: {},
        selectForm: {},
        activename: "",
        flooractivename: "",
        buildingData: [],
        floorData: [],
        pageDataList: [],
      };
    },
    computed: {
      getBackground() {
        return function(floor) {
          if(floor.dev_status == "0000") {
            return 2
          } else if(floor.dev_status == "0031") {
            return 0
          }
          if(this.toiletList[0] && this.toiletList[0].location) {
            if(floor.room_code == this.toiletList[0].location.room_code) {
              if(this.toiletList[0].status == '1') {
                return 0
              } else {
                return 2
              }
            } else {
              return 2
            }
          } else {
            return 2
          }
        }
      },
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getBuildingData();
    },
    methods: {
      handleFilter(e) {
        let id = e.currentTarget.dataset.id;
        if (this.selectArr.indexOf(parseInt(id)) === -1) {
          this.selectArr.push(parseInt(id));
        }
      },
      handleClose(id) {
        if (this.selectArr.indexOf(parseInt(id)) !== -1) {
          this.selectArr.splice(this.selectArr.indexOf(parseInt(id)), 1);
        }
      },
      handleSelectBuilding(tab) {
        let params = {
          building_id: tab.$attrs.datafloorid,
        };
        if (tab.$attrs.datafloorid) this.getFloorData(params);
      },
      handleTabFloorClick(tab) {
        this.loadingWrap = true;
        this.getTableData(tab.$attrs.datafloorid);
      },
      handleElderDetail(id) {
        if (id == 0) return;
        let params = {
          id: id,
        };
        getOlder("get", params).then((resp) => {
          if (resp.code === 200) {
            this.elderTk = true;
            this.elderData = resp.data;
          }
        });
      },
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            let list = resp?.data?.list.reverse() || [];
            this.buildingData = list;
            this.building_id = list[0].id;
            this.activename = list[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list.reverse() || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
        };
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data?.list || [];
            this.pageDataList = data;
            this.loadingWrap = false;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: flex;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .el-tag {
        line-height: 34px;
        color: #333;
        background: none;
        border: 1px solid #dddfe7;

        &.active {
          line-height: 36px;
          color: #fff;
          border: none;
        }
      }

      .el-tag--medium {
        height: 36px;
        font-size: 14px;
        cursor: pointer;

        ::v-deep {
          .el-tag__close {
            color: #fff;
          }
        }
      }
    }

    .el-card {
      margin-bottom: 30px;
      cursor: pointer;
      border-radius: 4px;

      ::v-deep {
        .el-card__header {
          height: 48px;
          padding: 0 12px;
          line-height: 48px;
          background: #18ba39;
        }

        .el-card__body {
          padding: 0;

          .item {
            display: flex;
            padding: 22px 16px;

            span {
              flex: 1;
              font-size: 18px;
              line-height: 26px;
              color: #fff;
              vertical-align: middle;

              &:first-child {
                flex: 0 0 50px;
                width: 50px;
              }
            }

            .header_icon {
              margin-right: 12px;
              font-size: 24px;
              color: #fff;
            }
          }
        }
      }
    }

    .el-card.colorType0 {
      ::v-deep {
        .el-card__body {
          background: #e0c720;
        }
      }
    }

    .el-card.colorType1 {
      ::v-deep {
        .el-card__body {
          background: #e5362a;
        }
      }
    }

    .el-card.colorType2 {
      ::v-deep {
        .el-card__body {
          background: #c400d2;
        }
      }
    }

    .el-card.colorType3 {
      ::v-deep {
        .el-card__body {
          background: #18ba39;
        }
      }
    }
  }
</style>
